<template>
    <el-container>
        <el-header>
            <Navigation />
        </el-header>
        <el-main>
            <router-view v-slot="{ Component }">
                <transition name="fade" mode="out-in">
                    <component :is="Component"></component>
                </transition>
            </router-view>
        </el-main>
        <el-footer>
            <Footer />
        </el-footer>
    </el-container>
    <vue-progress-bar></vue-progress-bar>
</template>

<script>
import Navigation from "@/components/Home/Navigation";
import { getCurrentInstance } from "vue";
import Footer from "./components/Home/Footer.vue";

export default {
    name: "App",
    components: {
        Navigation,
        Footer,
    },
    setup() {
        const internalInstance = getCurrentInstance();
        //  [App.vue specific] When App.vue is first loaded start the progress bar
        internalInstance.appContext.config.globalProperties.$Progress.start();
        setTimeout(() => {
            internalInstance.appContext.config.globalProperties.$Progress.finish();
        }, 3500);
    },
};
</script>

<style lang="scss">
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
html {
    font-family: "微软雅黑", Arial, Helvetica, sans-serif;
    height: 100vh;
}

::-webkit-scrollbar {
    width: 10px;
    background: #c6e6e8;
}

/*滚动条*/
::-webkit-scrollbar-thumb {
    background: #93d5dc;
}

#app {
    height: 100vh;

    .el-header {
        position: fixed;
        z-index: 998;
        width: 100%;
        padding: 0;
    }

    .el-main {
        margin: 60px 0;
        width: 100%;
    }
}

// 页面切换动画
.fade-enter-active {
    opacity: 0;
    transition: opacity 0.3s;
}

.fade-enter {
    opacity: 0;
}

.fade-enter-to {
    opacity: 1;
}

.fade-leave {
    opacity: 1;
}

.fade-leave-active {
    opacity: 0;
    transition: opacity 0.3s;
}

.fade-leave-to {
    opacity: 0;
}
</style>
